<template>
	<!-- 此处改动，camear文件为新添加文件  -->
	<view class="live-camera" :style="{ width: windowWidth, height: windowHeight }">
		<view class="preview" :style="{ width: windowWidth, height: windowHeight - 80 }">
			<live-pusher
				id="livePusher"
				ref="livePusher"
				class="livePusher"
				mode="FHD"
				beauty="1"
				whiteness="1"
				:aspect="aspect"
				min-bitrate="1000"
				audio-quality="16KHz"
				device-position="front"
				:auto-focus="true"
				:muted="true"
				:enable-camera="true"
				:enable-mic="false"
				:zoom="false"
				@statechange="statechange"
				:style="{ width: cameraWidth, height: cameraHeight }"
			></live-pusher>

			<!--提示语-->
			<cover-view class="remind">
				<text class="remind-text" style="">{{ message }}</text>
			</cover-view>

			<!--辅助线-->
			<cover-view class="outline-box" :style="{ width: windowWidth, height: windowHeight - 80 }">
				<cover-image class="outline-img" src="/static/live-camera/outline/1.png" style=""></cover-image>
			</cover-view>
		</view>
<!--底部菜单区域背景-->
			<!-- <cover-view style="background-color: #FFFFFF; width: 100vw; height: 500rpx; position: fixed; bottom: 0; left: 0;"></cover-view> -->
		<view class="menu" ref= "menu" :style="{height:windowHeight>750 ? '350rpx' : '150rpx'}">
			
			<!--返回键-->
			<cover-image class="menu-back" 
			 :style="{bottom:windowHeight>750 ? '50%' : '20%'}"
			 @tap="back" src="/static/userifo-supplement/fanhui.png"></cover-image>

			<!--快门键-->
			<cover-image class="menu-snapshot" 
			 :style="{bottom:windowHeight>750 ? '30%' : '0'}"
			@tap="snapshot" src="/static/userifo-supplement/click-shot.png"></cover-image>

			<!--相册键-->
			<view class="menu-flip" 
			 :style="{bottom:windowHeight>750 ? '50%' : '20%'}"
			@click="album">相册</view>
			<!-- <cover-image class="menu-flip" @tap="flip" src="/static/live-camera/flip.png"></cover-image> -->
		</view>
	</view>
</template>

<script>
let _this = null;
const dom = weex.requireModule('dom')
import {inputtips} from '@/api/api.js' //输入提示功能
export default {
	data() {
		return {
			dotype: 'idphoto', //操作类型
			message: '', //提示
			aspect: '1:1', //比例
			cameraWidth: '', //相机画面宽度
			cameraHeight: '', //相机画面宽度
			windowWidth: '', //屏幕可用宽度
			windowHeight: '', //屏幕可用高度
			camerastate: false, //相机准备好了
			livePusher: null, //流视频对象
			snapshotsrc: null ,//快照
			
			
			image:"",
			uploadToken: '',//七牛上传TOKEN
		};
	},
	onLoad(e) {
		
		_this = this;
		if (e.dotype != undefined) this.dotype = e.dotype;
		this.initCamera();
	},
	onReady() {
		this.livePusher = uni.createLivePusherContext('livePusher', this);
		this.startPreview(); //开启预览并设置摄像头
		this.poenCarme();
	},
	methods: {
		//轮询打开
		poenCarme() {
			//#ifdef APP-PLUS
			// 
			// if (plus.os.name == 'Android' || plus.os.name == 'iOS') {
				this.poenCarmeInterval = setTimeout(function() {
					// console.log(_this.camerastate);
					if (!_this.camerastate) _this.startPreview();
				}, 500);
			// }
			//#endif
		},

		//初始化相机
		initCamera() {
			uni.getSystemInfo({
				success: function(res) {
					_this.windowWidth = res.windowWidth;
					_this.windowHeight = res.windowHeight;
					_this.cameraWidth = res.windowWidth;
					_this.cameraHeight = res.windowWidth * 1.5;
				}
			});
		},

		//开始预览
		startPreview() {
			this.livePusher.startPreview({
				success: a => {
					// console.log(a);
				}
			});
		},
		//停止预览
		stopPreview() {
			this.livePusher.stopPreview({
				success: a => {
					_this.camerastate = false; //标记相机未启动
				}
			});
		},

		//状态
		statechange(e) {
			//状态改变
			// console.log(e);
			if (e.detail.code == 1007) {
				_this.camerastate = true;
			} else if (e.detail.code == -1301) {
				_this.camerastate = false;
			}
		},

		//返回
		back() {
			uni.navigateBack();
		},

		//抓拍
		snapshot() {
			this.livePusher.snapshot({
				success: e => {
					console.log(e);
					uni.setStorageSync("idphoto",e.message.tempImagePath)
						uni.navigateBack({
							delta: 1
						})
						// console.log("1233344")
						let pages = getCurrentPages(); //获取页面栈
						let beforePage = pages[pages.length - 1]; //前一个页面
						beforePage.$vm.updateUserImage(e.message.tempImagePath); //前一个页面方法
				
					
					_this.snapshotsrc = e.message.tempImagePath;
					_this.stopPreview();
				}
			});
		},

		// 调用本地相册
		album(){
			uni.chooseImage({
				count: 1 , //最多可以选择的图片张数
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有 
				sourceType: ['album'], //从相册选择
				success: (res) => {
					if (res.tempFilePaths.length > 1) return uni.showToast({ title: '最多上传1张图片', icon: 'none' })
					
					
					// <!-- 新增修改 180-187   189-193不要-->
						uni.setStorageSync("idphoto",res.tempFiles[0].path)
						uni.navigateBack({
							delta: 1
						})
						// console.log("1233344",res.tempFiles[0].path)
						const pages = getCurrentPages(); //获取页面栈
						const beforePage = pages[pages.length - 1]; //前一个页面
						beforePage.$vm.updateUserImage(res.tempFiles[0].path); //前一个页面方法
					
					
				}
			})
		},
		
		
	},
	mounted() {
	
	}
};
</script>

<style lang="scss">
	
.live-camera {
	// height: 100vh !important;
	background-color: #FFFFFF;
	.preview {
		justify-content: center;
		align-items: center;
		// z-index: 999;
		.outline-box {
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			z-index: 999;
			align-items: center;
			justify-content: center;
			.outline-img {
				width: 750rpx;
				height: 1125rpx;
				z-index: 999;
			}
		}
		.remind {
			position: absolute;
			top: 880rpx;
			width: 750rpx;
			z-index: 100;
			align-items: center;
			justify-content: center;
			.remind-text {
				color: #dddddd;
				font-weight: bold;
			}
		}
	}
	.menu {
		background-color:#fff;
		position: fixed;
		left:0;
		bottom: 0rpx;
		width: 750rpx;
		// height: 150rpx;
		z-index: 98;
		justify-content:center;
		align-items: center;
		
		.menu-back {
			position: absolute;
			left: 100rpx;
			// top:20% ;
			
			width: 80rpx;
			height: 80rpx;
			z-index: 99;
			align-items: center;
			justify-content: center;
		}
		.menu-snapshot {
			width: 130rpx;
			height: 130rpx;
			z-index: 99;
			position: absolute;
			// top: 0;
		}
		.menu-flip {
			position: absolute;
			right: 100rpx;
			// top:20% ;
			width: 80rpx;
			height: 80rpx;
			z-index: 99;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
